<template>
	<view>
		<cu-custom bgColor="bg-black"><block slot="content">我的</block></cu-custom>
		
		<view class="flex flex-direction align-center bg-black padding-bottom-xl">
			<open-data type="userAvatarUrl" class="user_avatar"></open-data>
			<open-data type="userNickName" class="user_name text-df text-white"></open-data>
			<text class="text-sm text-gray text-center margin-top-sm">欢迎光临，汇率查希望能成为你生活中的小帮手！</text>
			<text class="text-sm text-gray text-center">这里可以定义全局的一些特性，以让它更符合你的使用习惯！</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-xs">
			<view class="action text-bold"><text class="cuIcon-full text-sl"></text>一转多配置</view>
			<!-- <view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button>
			</view> -->
		</view>
		<radio-group class="block" @change="colNumChange">
			<view class="cu-form-group col_num_item">
				<view class="flex flex-direction justify-center" style="padding:10rpx 0;">
					<view class="title title-custom text-sm">一行二列</view>
					<text class="text-xs text-gray">一行显示二个货币，一屏可显示更多内容，但是字体较小</text>
				</view>
				<radio :class="colNum=='2'?'checked':''" :checked="colNum=='2'?true:false" value="2"></radio>
			</view>
			<view class="cu-form-group col_num_item">
				<view class="flex flex-direction justify-center" style="padding:10rpx 0;">
					<view class="title title-custom text-sm">一行一列</view>
					<text class="text-xs text-gray">一行显示一个货币，显示内容较少，但是字体较大</text>
				</view>
				<radio :class="colNum=='1'?'checked':''" :checked="colNum=='1'?true:false" value="1"></radio>
			</view>
		</radio-group>
		
		<!-- <view class="cu-bar bg-white solid-bottom margin-top-xs">
			<view class="action text-bold">一转一配置</view>
		</view> -->
		<view class="cu-bar bg-white solid-bottom margin-top-xs">
			<view class="action text-bold"><text class="cuIcon-recharge text-sl"></text>小数位配置</view>
			<picker @change="decimalDigitsChange" :value="decimalDigitsIndex" :range="decimalDigitsList">
				<view class="picker margin-right-sm decimal_digits_picker">{{decimalDigitsList[decimalDigitsIndex]}}位 <text class="cuIcon-triangledownfill text-sm"></text></view>
			</picker>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-xs flex flex-direction align-start justify-center">
			<view class="action text-bold"><text class="cuIcon-selection text-sl"></text>最常用功能</view>
			<view class="flex"><text class="text-xs text-gray" style="padding-left:30rpx">设置自己经常使用小程序的哪项转换功能，选择后下次启动会主动跳转对应页</text></view>
		</view>
		<radio-group class="block" @change="mainUseFunChange">
			<view class="flex">
				<view class="cu-form-group main_use_item">
					<view class="title title-custom text-xs">一转多</view>
					<radio :class="mainUseFun=='onetomore'?'checked':''" :checked="mainUseFun=='onetomore'?true:false" value="onetomore"></radio>
				</view>
				<view class="cu-form-group main_use_item">
					<view class="title title-custom text-xs">一转一</view>
					<radio :class="mainUseFun=='onetoone'?'checked':''" :checked="mainUseFun=='onetoone'?true:false" value="onetoone"></radio>
				</view>
			</view>
			
		</radio-group>
		
		<!-- #ifdef MP-QQ -->
		<view class="ad_wrap">
			<common-ad unitId="19b95b46f91ea94b7725be921c64e127" adType="card" />
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {requestAllCurrency} from "../../controller/request_ctrl";
	import {initCurrency} from "../../utils/config";
	import {getStorage, setStorage} from "../../utils/storage_util";
	import shareConfig from "../../utils/share_config";
	export default {
		data() {
			return {
				colNum: 2,
				decimalDigitsIndex: 2,
				decimalDigitsList:[0,1,2,3],
				mainUseFun: "onetomore"
			}
		},
		
		onShow() {
			this.initData();
		},
		onShareAppMessage() {
			return shareConfig();
		},
		methods: {
			/**
			 * 初始化数据
			 */
			initData() {
				try{
					let decimalDigitsIndex = getStorage("decimalDigitsForErtc");
					let colNum = getStorage("homeColNumForErtc");
					let mainUseFun = getStorage("mainUseFunForErtc");
					this.decimalDigitsIndex = Number(decimalDigitsIndex == "" ? 2 : decimalDigitsIndex);
					this.colNum = colNum ? colNum : 2;
					this.mainUseFun = mainUseFun ? mainUseFun : "onetomore";
				} catch(err) { 
					console.log("我的页面初始化数据：", err);
				}
				
			},
			
			/**
			 * 首页显示货币列数
			 * @param {Object} e事件对象
			 */
			colNumChange(e) {
				this.colNum = e.detail.value;
				setStorage("homeColNumForErtc", this.colNum);
			},
			
			/**
			 * 全局货币小数位保留
			 * @param {Object} e事件对象
			 */
			decimalDigitsChange(e) {
				this.decimalDigitsIndex = e.detail.value;
				setStorage("decimalDigitsForErtc", this.decimalDigitsList[this.decimalDigitsIndex]);
			},
			
			/**
			 * 自己最常用功能设置
			 * @param {Object} e事件对象
			 */
			mainUseFunChange(e) {
				this.mainUseFun = e.detail.value;
				setStorage("mainUseFunForErtc", this.mainUseFun);
			}
		}
	}
</script>

<style>
.user_avatar{
	width:88rpx;
	height:88rpx;
	margin:40rpx auto 30rpx auto;
	border-radius: 50%;
	overflow: hidden;
}
.title-custom{
	height:36rpx;
	line-height:36rpx;
}
.col_num_item{
	min-height:80rpx;
	border-color:#999;
}
.main_use_item{
	min-height:80rpx;
	flex:1;
	border:none!important;
}
.decimal_digits_picker{
	width:440rpx;
	text-align: right;
	padding:30rpx 0;
}
</style>
